﻿@using WsdShop.Model

@{
    Layout = null;
    var draw = (Draw)ViewBag.Draw;
}

<style>
    .f_popBox {
        background: -moz-linear-gradient(top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.7) 1%, rgba(0,0,0,0.7) 100%);
        background: -webkit-linear-gradient(top, rgba(0,0,0,0.7) 0%,rgba(0,0,0,0.7) 1%,rgba(0,0,0,0.7) 100%);
        background: linear-gradient(to bottom, rgba(0,0,0,0.7) 0%,rgba(0,0,0,0.7) 1%,rgba(0,0,0,0.7) 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b3000000', endColorstr='#b3000000',GradientType=0 );
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        display: none;
        height: 100%;
        z-index: 9;
    }

    .fa_b_box {
        width: 70%;
        position: absolute;
        top: 20%;
        left: 15%;
        background: #c8e5ec;
        text-align: center;
        z-index: 2;
    }

        .fa_b_box .hd_txtBox {
            padding: 20px 0;
        }

        .fa_b_box .hd_txt {
            font-size: 18px;
            color: #555555;
            text-align: center;
        }

    .fe_b_box {
        display: none;
    }

    .f_cjpopBox {
        background: #fff !important;
    }

    .fa_btns {
        border-top: 1px solid #dcdcdc;
        height: 48px;
        line-height: 48px;
    }

        .fa_btns .half_w {
            width: 50%;
            float: left;
            text-align: center;
        }

    .cancle_btn {
        color: #555555;
    }

    .ok_btn {
        color: #ff4242;
        border-left: 1px solid #dcdcdc;
    }
    /*中奖*/
    .winning_bg {
        width: 80%;
        margin: 0 auto;
        background: url(/Content/images/zj_bg.png) no-repeat top center;
        background-size: 100%;
    }

    .winning_tubox {
        padding-top: 50%;
        width: 50%;
        text-align: center;
        margin: 0 auto;
    }

        .winning_tubox img {
            width: 100%;
        }

    .winning_txt {
        color: #ff4242;
        line-height: 2;
        text-align: center;
    }

    .lj_btn {
        margin: 0 auto;
        margin-top: 20px;
        margin-bottom: 20px;
        width: 80%;
        background-color: #feb913;
        color: #eb0b51;
        font-size: 15px;
        height: 40px;
        line-height: 40px;
        text-align: center;
        border-radius: 20px;
        display: block;
    }
    /*end中奖*/
    .my_zj {
        position: fixed;
        z-index: 1;
        width: 60px;
        height: 60px;
        border-radius: 50%;
        background-color: #eb272a;
        color: #fff;
        text-align: center;
        bottom: 10px;
        padding-top: 10px;
        font-size: 10px;
        left: calc((100% - 60px) / 2);
    }

        .my_zj img {
            width: 24px;
            margin: 0 auto;
        }

    .w_57No {
        width: 100%;
        padding: 4%;
    }

    .w_57yes {
        position: absolute;
        bottom: 12%;
        width: 50%;
        left: 25%;
        background: #FDB04D;
        color: #fff;
        font-size: 14px;
        padding: 1% 0;
        border-radius: 50px;
    }
</style>
<div ng-controller="drawCtrl">
    <div class="w_topHonour_pan">
        <div id="lottery">
            <input type="hidden" ng-model="ActId" />
            <table border="0" cellpadding="0" cellspacing="0">
                <tr>
                    <td class="lottery-unit lottery-unit-0" data-index="0" data-pid="0">谢谢参与</td>
                    <td class="lottery-unit lottery-unit-1" data-index="1" data-pid="0">谢谢参与</td>
                    <td class="lottery-unit lottery-unit-2" data-index="2" data-pid="0">谢谢参与</td>
                    <td class="lottery-unit lottery-unit-3" data-index="3" data-pid="0">谢谢参与</td>
                </tr>
                <tr>
                    <td class="lottery-unit lottery-unit-11" data-index="11" data-pid="0">谢谢参与</td>
                    <td colspan="2" rowspan="2" class="w_click"><a href="javascript:void(0)"></a></td>
                    <td class="lottery-unit lottery-unit-4" style="float:right;" data-index="4" data-pid="0">谢谢参与</td>
                </tr>
                <tr>
                    <td class="lottery-unit lottery-unit-10" data-index="10" data-pid="0">谢谢参与</td>
                    <td class="lottery-unit lottery-unit-5" style="float:right;" data-index="5" data-pid="0">谢谢参与</td>
                </tr>
                <tr>
                    <td class="lottery-unit lottery-unit-9" data-index="9" data-pid="0">谢谢参与</td>
                    <td class="lottery-unit lottery-unit-8" data-index="8" data-pid="0">谢谢参与</td>
                    <td class="lottery-unit lottery-unit-7" data-index="7" data-pid="0">谢谢参与</td>
                    <td class="lottery-unit lottery-unit-6" data-index="6" data-pid="0">谢谢参与</td>
                </tr>
            </table>
        </div>
    </div>
    <div class="w_honour_intro">
        <div class="w_honorIntro_ti">活动说明</div>
        <div class="w_honorIntro_con">
            @draw.Description
        </div>
    </div>
    <div class="w_honour_intro">
        <div class="w_honorIntro_ti">抽奖说明</div>
        <div class="w_honorIntro_con">
            @draw.AwardDes
        </div>
    </div>
    <!-- 我的中奖图标 -->
    <a href="javascript:void(0)" ui-sref="draw.list" class="my_zj">
        <img src="~/Content/images/my_zj.png" alt="" />
        <p>我的中奖</p>
    </a>
    <!--end 我的中奖图标 -->
    <!-- 弹出 -->
    <div class="f_popBox">
    </div>
    <!-- 没有中奖弹出 -->
    <div class="fa_b_box fe_b_box f_cjpopBox" id="noPrize">
        <img src="~/Content/images/close.png" alt="关闭按钮" style="width: 20px;float: right;margin:5px" class="closeNoPrize" />
        <img src="~/Content/images/w_noHonour.png" class="w_57No" />
        <a href="javascript:void(0);" class="w_57yes closeNoPrize">知道了</a>
    </div>
    <!-- end没有中奖弹出 -->
    <!-- 中奖的弹出-->
    <div class="fa_b_box fe_b_box f_cjpopBox" id="havePrize">
        <img src="~/Content/images/close.png" alt="关闭按钮" style="width: 20px;float: right;margin:5px" class="closePrize" />
        <div class="winning_bg clear">
            <div class="winning_tubox"><img src="~/Content/images/zjtu.png" alt="" /></div>
            <p class="winning_txt">恭喜你</p>
            <p class="winning_txt">获得iphone7一台！</p>
        </div>
        <div class="lj_btn" ng-click="goaward()">
            马上去领奖
        </div>
    </div>
</div>


<script type="text/javascript">
    App.controller('drawCtrl', ['$scope', '$http', '$rootScope', '$stateParams', '$state', function ($scope, $http, $rootScope, $stateParams, $state) {
        $scope.EndIndex = 0;
        $scope.IsPrize = 0;
        $scope.tId=0;
        if($stateParams.tId>0){
            $scope.tId=$stateParams.tId;
        }
        if($stateParams.drawId>0){
            $scope.ActId = $stateParams.drawId ;
        }else{
            $scope.ActId = @draw.Id ;
        }
        $scope.click = false;
        $scope.arr = [];
        for (var i = 0; i < 12; i++) {
            $scope.arr[i] = i;
        }
        $scope.arr.sort(function () { return 0.5 - Math.random() });
        //数据初始化
        $http.post("/Draw/DrawInfo",{actId:$scope.ActId}).then(function(response){
            if(response.data.isSuccess){
                for(var i = 0;i<response.data.data.length;i++){
                    response.data.data[i].index = $scope.arr[i];
                }
                for (var i = 0; i < response.data.data.length; i++) {
                    for (var j = 0; j < $(".lottery-unit").length; j++) {
                        if (response.data.data[i].index == $(".lottery-unit").eq(j).data("index")) {
                            $(".lottery-unit").eq(j).html(response.data.data[i].RewardName);
                            $(".lottery-unit").eq(j).attr("data-pid", response.data.data[i].Id);//注意 ，data赋值不会改变DOM树
                            //alert($(".lottery-unit").eq(j).data("pid") +"和"+ $(".lottery-unit").eq(j).data("index"));
                        }
                    }
                }
            }
            else{
                //alert(response.data.msg);
                layer.msg(response.data.msg);
            }
        });

        var tt = function ()
        {
            $rootScope.WxShare($rootScope.pageTitle(), '优品三悦', location.href, $rootScope.LogoUrl);
        }

        setTimeout(tt, 1000)

        $scope.goaward = function () {
            if($scope.tId>0){
                $state.go('activity.myactivitylist');
            }else{
                $state.go('draw.list');
            }
        }

        $scope.lottery = {
            index: -1,	//当前转动到哪个位置，起点位置
            count: 0,	//总共有多少个位置
            timer: 0,	//setTimeout的ID，用clearTimeout清除
            speed: 20,	//初始转动速度
            times: 0,	//转动次数
            cycle: 50,	//转动基本次数：即至少需要转动多少次再进入抽奖环节
            prize: -1,	//中奖位置
            init: function (id) {
                if ($("#" + id).find(".lottery-unit").length > 0) {
                    $lottery = $("#" + id);
                    $units = $lottery.find(".lottery-unit");
                    this.obj = $lottery;
                    this.count = $units.length;
                    $lottery.find(".lottery-unit-" + this.index).addClass("active");
                };
            },
            roll: function () {
                var index = this.index;
                var count = this.count;
                var lottery = this.obj;
                $(lottery).find(".lottery-unit-" + index).removeClass("active");
                index += 1;
                if (index > count - 1) {
                    index = 0;
                };
                $(lottery).find(".lottery-unit-" + index).addClass("active");
                this.index = index;
                return false;
            },
            stop: function (index) {
                this.prize = index;
                return false;
            }
        };

        $scope.roll = function(){
            $scope.lottery.times += 1;
            $scope.lottery.roll();
            //转到位置后停止
            if ($scope.lottery.times > $scope.lottery.cycle + 10 && $scope.lottery.prize == $scope.lottery.index) {
                clearTimeout($scope.lottery.timer);
                $scope.lottery.prize = 0;
                $scope.lottery.times = 0;
                $scope.click = false;
                setTimeout(function () {
                    if ($scope.IsPrize == 0) {
                        $("#havePrize").css("display", "none");
                        $("#noPrize").fadeIn();
                    }
                    else if ($scope.IsPrize == 1) {
                        $("#noPrize").css("display", "none");
                        $("#havePrize").fadeIn();
                        $scope.IsPrize ==0;
                    }
                }, 1000);

            } else {
                if ($scope.lottery.times < $scope.lottery.cycle) {
                    $scope.lottery.speed -= 10;
                } else if ($scope.lottery.times == $scope.lottery.cycle) {
                    //var index = Math.random()*(lottery.count)|0;//当转到cycle时取到抽奖结果index
                    var index = $scope.EndIndex;
                    $scope.lottery.prize = index;
                } else {
                    if ($scope.lottery.times > $scope.lottery.cycle + 10 && (($scope.lottery.prize == 0 && $scope.lottery.index == 7) || $scope.lottery.prize == $scope.lottery.index + 1)) {
                        $scope.lottery.speed += 110;
                    } else {
                        $scope.lottery.speed += 20;
                    }
                }
                if ($scope.lottery.speed < 40) {
                    $scope.lottery.speed = 40;
                };
                //console.log(lottery.times+'^^^^^^'+lottery.speed+'^^^^^^^'+lottery.prize);
                $scope.lottery.timer = setTimeout($scope.roll, $scope.lottery.speed);
            }
            return false;
        }

        $scope.lottery.init('lottery');

        $("#lottery .w_click").click(function () {
            //click是为了让转的时候不受影响
            if ($scope.click) {
                return false;
            } else {
                $http.post('/Draw/StartDraw',{actId:$scope.ActId, tId:$scope.tId}).then(function(response){
                    if(response.data.isSuccess){
                        //返回成功说明中奖了，给EndIndex赋值，开始转，EndIndex就是转盘最后停的位置
                        var prizeId = response.data.data.Id;
                        if (prizeId != 0) {
                            $scope.IsPrize = 1;
                        }
                        //alert(prizeId);
                        $scope.EndIndex = $('.lottery-unit[data-pid="' + prizeId + '"]').eq(0).data("index");//若未中奖，则停在第一个谢谢参与
                        $("#havePrize").find(".winning_txt").eq(1).html(response.data.data.RewardName);
                        //开始转
                        $scope.lottery.speed = 100;
                        $scope.roll();
                        $scope.click = true;
                        return false;
                    }
                    else{
                        //alert(response.data.msg);
                        layer.msg(response.data.msg);
                    }
                })
            }
        });

        $(".closeNoPrize").on("click", function () {
            $("#noPrize").fadeOut();
        })

        $(".closePrize").on("click", function () {
            $("#havePrize").fadeOut();
        })

    }])

</script>

